<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="
        connect-src socket: https: http: blob: ipc: wss: ws: ws://localhost:* {{protocol_handlers}};
         script-src socket: https: http: blob: http://localhost:* 'unsafe-eval' 'unsafe-inline' {{protocol_handlers}};
         worker-src socket: https: http: blob: 'unsafe-eval' 'unsafe-inline' {{protocol_handlers}};
          frame-src socket: https: http: blob: http://localhost:*;
            img-src socket: https: http: blob: http://localhost:*;
          child-src socket: https: http: blob:;
         object-src 'none';
      "
    >
    <script charset="utf-8" type="text/javascript">
      Object.defineProperty(globalThis, '__RUNTIME_SHARED_WORKER_CONTEXT__', {
        configurable: false,
        enumerable: false,
        writable: false,
        value: true
      })
    </script>
    <script type="module">
      import application from 'socket:application'
      import process from 'socket:process'

      Object.assign(globalThis, {
        async openExternalLink (href) {
          const currentWindow = await application.getCurrentWindow()
          await currentWindow.openExternal(href)
        }
      })

      document.title = `Shared Worker Debugger - v${process.version}`
    </script>
    <script type="module" src="./init.js"></script>
    <style type="text/css" media="all">
      * {
        box-sizing: border-box;
      }

      body {
        background: rgba(40, 40, 40, 1);
        color: rgba(255, 255, 255, 1);
        font-family: 'Inter-Light', sans-serif;
        font-size: 14px;
        margin: 0;
        position: absolute; top: 0px; left: 0; right:0; bottom: 0px;
      }

      a {
        color: inherit;
        text-decoration: none;
        transition: all 0.2s ease;

        &.with-hover:hover {
          border-bottom: 2px solid rgba(255, 255, 255, 1);
        }
      }

      p {
        background: rgba(14, 85, 152, .25);
        border-radius: 2px;
        display: inline-block;
        font: 12px/26px 'Inter-Light', sans-serif;
        margin: 0;
        text-align: center;
        width: 100%;

        &.message {
          display: block;
          overflow: hidden;
          padding: 0 8px;
          position: relative;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
        }
      }

      pre#log {
        background: rgba(0, 0, 0, 1);
        overflow-y: scroll;
        padding: 16px;
        margin: 0;
        position: absolute; top: 0px; left: 0; right:0; bottom: 0px;

        & span {
          opacity: 0.8;
          transition: all 0.2s ease;

          &:hover {
            opacity: 1;
            transition: all 0.05s ease;
          }

          & code {
            color: rgb(215, 215, 215);
            display: block;
            font-size: 12px;
            line-break: anywhere;
            margin-bottom: 8px;
            opacity: 0.8;
            white-space: wrap;
            transition: all 0.1s ease;

            &:hover {
              color: rgb(225, 225, 225);
              opacity: 1;
              transition: all 0.025s ease;
            }

            & span {
              &.red {
                color: red;
              }
            }
          }

          & details {
            &[open] span {
              opacity: 1;
              transition: all 0.05s ease;
              & code {
                color: rgb(225, 225, 225);
                opacity: 1;
                transition: all 0.025s ease;
              }
            }

            & > summary {
              cursor: pointer;
              list-style: none;
            }
          }
        }
      }
    </style>
  </head>
  <body>
    <pre id="log"></pre>
  </body>
</html>
